{% extends 'base/base.html' %}

{% block title %}{{ spot.name }} - 景点详情{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/user.css' %}">
{% endblock %}

{% block sidebar %}
{# 同dashboard.html的sidebar #}
{% include 'user/sidebar.html' %}
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ spot.name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{% url 'accounts:toggle_favorite' spot.id %}" class="btn btn-sm {% if is_favorite %}btn-danger{% else %}btn-outline-danger{% endif %} me-2">
            <i class="fas fa-heart me-1"></i>
            {% if is_favorite %}已收藏{% else %}收藏{% endif %}
        </a>
        <a href="{% url 'accounts:spot_list' %}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>返回列表
        </a>
    </div>
</div>

<div class="card mb-4">
    {% if spot.cover_image %}
    <img src="{{ spot.cover_image.url }}" class="card-img-top" alt="{{ spot.name }}" style="max-height: 400px; object-fit: cover;">
    {% endif %}
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-6">
                <p class="mb-1"><i class="fas fa-map-marker-alt text-primary me-2"></i> <strong>位置:</strong> {{ spot.location }}</p>
            </div>
            <div class="col-md-6">
                <p class="mb-1"><i class="fas fa-user text-primary me-2"></i> <strong>发布机构:</strong> {{ spot.created_by.culture_profile.institution_name }}</p>
            </div>
        </div>
        
        <h4 class="mb-3">景点介绍</h4>
        <div class="spot-description">
            {{ spot.description|linebreaks }}
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">位置地图</h5>
    </div>
    <div class="card-body">
        <div id="map" style="height: 300px; background-color: #eee; display: flex; align-items: center; justify-content: center;">
            <p class="text-muted">地图加载中...</p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/user.js' %}"></script>
<script>
// 地图初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 这里可以添加地图初始化代码
    console.log('景点位置:', '{{ spot.location }}');
    
    // 示例：模拟地图加载
    setTimeout(function() {
        document.getElementById('map').innerHTML = `
            <div class="text-center p-4">
                <i class="fas fa-map-marked-alt fa-3x text-muted mb-3"></i>
                <p>地图显示: {{ spot.location }}</p>
                <small class="text-muted">(实际项目中这里会集成真实地图API)</small>
            </div>
        `;
    }, 1000);
});
</script>
{% endblock %}